Modis

This template using Bootstrap framework. Main content is placed between header and footer area. The content is nested within <div id="content">.

... header area ...

<div id="content">
     <div class="container">
          <div class="row">
               <div class="col-md-4">
                    this is your content			
               </div>
               <div class="col-md-8">
                    this is your content
               </div>
          </div>
     </div>

     <section>
          <div class="container">
               <div class="row">
                    this is your content
               </div>
          </div>
     </section>

</div>


... footer area ...
        

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). Click here for more information.

<div class="row">
     <div class="col-md-6"> this is 1/2 columns </div>
     <div class="col-md-6"> this is 1/2 columns </div>
</div>

<div class="row">
     <div class="col-md-4"> this is 1/3 columns </div>
     <div class="col-md-8"> this is 2/3 columns </div>
</div>

<div class="row">
     <div class="col-md-3"> this is 1/4 columns </div>
     <div class="col-md-9"> this is 3/4 columns </div>
</div>

Open file designesia.js then change logo_pos value. Value: 1 - center, 2 - left

Open file designesia.js then change logo_dir_1 value.
If you use light header color (on scroll), you can add secondary logo by insert logo_dir_1.

Note: Change logo via jquery below is only for center logo only. For header with left logo you can replace from html file directly.

For logo position center

Open file designesia.js then change logo_center_top_margin value.

For logo position left

Open file designesia.js then change logo_left_top_margin value.

Used to make header visible or not on website scroll. Open file designesia.js then change header_sticky value.

Define header color on website scroll. Open file designesia.js then change header_color_on_scroll value.

• animate.css - used to make animation
• bg.css - used to set background for all section and subheader
• bootstrap.css - main css framework for this theme
• color.css - used to load color for template
• datepicker.css - for datepicker jquery
• flexslider.css - for flexslider jquery
• jpreloader.css - for jpreloader jquery
• jquery.countdown.css - for countdown jquery
• magnific-popup.css - for maginfic popup jquery
• owl.carousel.css, owl.theme.css, owl.transitions.css - for owl carousel jquery
• plugin.css - overwrite default plugin css
• rev-settings.css - custom css for Revolution Slider
• style.css - main css file for this template

To change accent color with premade color, open file css/color.css then replace value inside "colors/green.css" with other css file name.
All premade color on this template can be found inside folder css/color/.

All section/subheader background on this template can be edited within file css/bg.css

• jquery.min.js - http://docs.jquery.com/Downloading_jQuery
• bootstrap.min.js - bootstrap js file
• designesia.js - custom js file
• jquery.isotope.min.js - used in gallery page
• jquery.prettyPhoto.js - used to open popup image
• easing.js - http://archive.plugins.jquery.com/project/Easing
• jquery.ui.totop.js - used to scroll to top
• validation.js - used for contact form validation

Open file designesia.js then change logo_dir_1 value.

Select an object that you want to animate. As example you want create animate for H1 element. You can see below:

<h1 class="wow fadeIn" data-wow-delay=".2s" data-wow-duration=".5s">Animate Text</h1>

• You must add class name "wow" for object that you want to animate.
• fadeIn: sample type of animation. You can see all animation available from: http://daneden.github.io/animate.css/
• data-wow-delay: determine when animation will start (on second)
• data-wow-duration: determine duration of animation (on second)

1. Create a section tag then give it an id name.

   <section id="my-section">...content here...</section>

2. Add attribute data-stellar-background-ratio for scroll speed.

   <section id="my-section" data-stellar-background-ratio=".2">...content here...</section> 

3. Open bg.css file, set background image for your section.

   #my-section{
        background-image:my-bg-image.jpg;
   }

4. Done.

You can change location for Google map by open file js/map.js. Look code at line 7. Then change value for variable ‘myLatlng’.

You can generate latitude and longitude value here: http://www.latlong.net/

You can change date for countdown timer by open file js/countdown-custom.js.

Open > email.php. Change $to value with your email.

Open > booking.php. Change $to value with your email.